.head-content {
    margin: 20px;
    background-repeat: no-repeat; /* 禁止背景图片循环重复 */
    height: 130px;
    background-image: url('../../image/head.png');
    background-size: contain;
}

.normal-card {
    margin-top: 15px;
    height: 42vh;
    background-color: #011d4d;
}


.normal-table-card {
    margin-top: 15px;
    height: 60vh;
    background-color: #011d4d;
}


.alarm-table-card {
    margin-top: 15px;
    height: 35vh;
    background-color: #011d4d;
}

.normal-card-body {
    background: url('../../image/crad-body-bg.png') no-repeat center center;
    /*background-size: contain;*/
    /*background-position: 10%,10%;*/
    background-size: 95% 95%; /* 调整图片的显示大小，这里设置为50%宽度和自动高度 */
    padding: 20px 30px;
    height: 75%;

}



.normal-card-header {
    height: 10%;
}

.normal-table-card-header {
    height: 8%;
}

.task-data-label {
    display: inline-block;
    padding: 3px 3px;
    /*color: #4b7ca4;*/
    color: #64e8fd;
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de*/
    /*,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    width: 20%;
    margin-top: 12px;
    margin-left: 12px;
}


.task-data-container-lenth {
    font-size: 18px;
    /*margin-left: 3px;*/
    border: none;
    outline: none;
    /*color: #4b7ca4;*/
    color: white;
    font-weight: bold;
    border-radius: 4px;
    width: 50%;
    padding: 8px 8px;
    margin-top: 12px;
    background-color: transparent;

}




.task-data-container {
    font-size: 18px;
    /*margin-left: 3px;*/
    border: none;
    outline: none;
    /*color: #4b7ca4;*/
    color: white;
    font-weight: bold;
    border-radius: 4px;
    width: 18%;
    padding: 8px 8px;
    margin-top: 12px;
    background-color: transparent;

}

.task-form-label {
    display: inline-block;
    padding: 3px 3px 3px 3px;
    /*color: #4b7ca4;*/
    color: #64e8fd;
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de*/
    /*,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
    /*width: 15%;*/
    margin-top: 12px;
    margin-left: 20px;
}
.task-ratio-label {
    display: inline-block;
    padding: 3px 3px 3px 3px;
    /*color: #4b7ca4;*/
    color: #64e8fd;
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de*/
    /*,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
    /*width: 15%;*/
    /*margin-top: 2px;*/
    margin-left: 24px;
    vertical-align: -10px;
}
.box-ratio{
    display: inline-block;
    padding: 3px 3px 3px 3px;
    /*color: #4b7ca4;*/
    color: #64e8fd;
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de*/
    /*,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
    /*width: 15%;*/
    /*margin-top: 2px;*/
    margin-left: 0;
    vertical-align: -10px;
}



.task-data-title {
    background-color: #64e8fd;
    /*color: #4b7ca4;*/
    color: #1a1f28;
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de*/
    /*,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
    font-size: 20px;
    font-weight: bold;
    border-radius: 6px;
    width: 30%;
    margin: 20px 10px;
    height: 18%;
}

.device-data-label {
    display: inline-block;
    padding: 3px 3px;
    /*color: #4b7ca4;*/
    color: #64e8fd;
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de*/
    /*,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
    width: 10%;
    margin-top: 20px;
    margin-left: 20px;
}

.device-data-container {
    font-size: 20px;
    /*margin-left: 3px;*/
    border: none;
    outline: none;
    /*color: #4b7ca4;*/
    color: white;
    font-weight: bold;
    border-radius: 4px;
    width: 35%;
    margin-top: 20px;
    background-color: transparent;

}

.device-light-label {
    display: inline-block;
    padding: 3px 3px;
    /*color: #4b7ca4;*/
    color: #64e8fd;
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de*/
    /*,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
    width: 20%;
    margin-top: 20px;
    margin-left: 20px;
}

.device-icon {
    font-size: 30px;
    color: red;
    width: 10%;
    vertical-align: middle;
    margin-left: 15px;
}

.normal-icon {
    font-size: 30px;
    color: green;
    width: 10%;
    vertical-align: middle;
    margin-left: 15px;
}

.device-data-container {
    font-size: 20px;
    /*margin-left: 3px;*/
    border: none;
    outline: none;
    /*color: #4b7ca4;*/
    color: white;
    font-weight: bold;
    border-radius: 4px;
    /*width: 9%;*/
    margin-top: 20px;
    background-color: transparent;

}

.device-signal-label {
    display: inline-block;
    padding: 3px 3px;
    /*color: #4b7ca4;*/
    color: #64e8fd;
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de*/
    /*,0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;*/
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
    width: 13%;
    margin-top: 20px;
    margin-left: 20px;
}

.device-light-container {
    width: 10%;

}

.text-content {
    vertical-align: middle;
    color: #64e8fd;
    font-size: 20px;
    font-weight: bold
}
.left-text-container {
    width: 18%;
    margin-left: 2%;
    font-size: 20px
}